/*
 * @Author: 杨伟韦
 * @Date: 2025-04-24 24:09
 * @LastEditors: 杨伟韦
 * @LastEditTime: 2025-04-24 24:09
 * @Description: 根据指定宽高和背景颜色生成一张图片
 */

import { inject } from 'vue';

export default function useCreateImg() {
  const fabric = inject('fabric');

  const createImage = ({ width, height, backgroundColor, number }) => {
    // 创建一个 Fabric.js 画布并指定背景颜色
    const canvas = new fabric.Canvas(null, {
      width,
      height,
      backgroundColor,
    });

    let fontSize = Math.min(width, height) / 2;
    // 创建一个组来包含所有元素，方便设置圆角裁剪
    // const group = new fabric.Group([], {
    //   left: 0,
    //   top: 0,
    //   width: width,
    //   height: height,
    // });

    // 定义圆角矩形作为裁剪区域
    // const clipPath = new fabric.Rect({
    //   left: 0,
    //   top: 0,
    //   width: width,
    //   height: height,
    //   rx: 20, // 圆角 x 半径
    //   ry: 20, // 圆角 y 半径
    //   fill: '#aaa',
    // });

    // group.clipPath = clipPath;

    // // 创建文本对象
    // const tt = new fabric.Text('Hello, Faddsdsdsdsdsdsdsdsdbric.js!', {
    //   fontSize: 30,
    //   fill: 'blue',
    //   textAlign: 'center',
    // });
    // // 将文本添加到组中
    // group.add(tt);
    // canvas.add(clipPath);

    // 创建一个 Text 对象并设置其样式和位置
    const text = new fabric.Text(number.toString(), {
      left: width / 2,
      top: height / 2,
      fontSize: fontSize,
      fill: '#aaa',
      originX: 'center',
      originY: 'center',
    });

    // 将 Text 对象添加到画布上
    canvas.add(text);

    // 将画布内容转换为数据 URL
    const dataURL = canvas.toDataURL({
      format: 'png',
      quality: 1,
    });

    return dataURL;
  };

  return {
    createImage,
  };
}
